<template>
    <!-- 通用搜索 -->
    <transition name="el-zoom-in-bottom" mode="out-in">
        <div class="table-com-search" v-show="showComSearch">
            <slot name="tableHeaderSearch"></slot>
        </div>
    </transition>

    <!-- 操作按钮组 -->
    <div v-bind="$attrs" class="table-header ba-scroll-style">
        <template v-if="tableButtons">
            <template v-for="(item, idx) in tableButtons" :key="idx">
                <el-tooltip :content="item.tipName" placement="top">
                    <el-button v-blur @click="item.onClick" class="table-header-operate" type="primary">
                        <Icon :name="item.iconName" />
                        <span class="table-header-operate-text">{{ item.name }}</span>
                   </el-button>
                </el-tooltip>
            </template>
        </template>

        <!-- 工具按钮 -->
        <div class="table-search">
            <div class="table-search-button-group">
                <!-- 列显示控制 -->
                <el-dropdown :max-height="380" :hide-on-click="false">
                    <el-button
                        class="table-search-button-item right-border"
                        color="#dcdfe6"
                        plain
                        v-blur
                    >
                        <Icon size="14" name="el-icon-Grid" />
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, idx) in columnDisplay" :key="idx">
                                <el-checkbox
                                    v-if="item.prop"
                                    @change="onChangeShowColumn($event, item.prop)"
                                    :checked="!item.show"
                                    :model-value="item.show"
                                    size="small"
                                    :label="item.label"
                                />
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <!-- 数据导出按钮 -->
                <el-dropdown trigger="click" @command="onChangeExportTable">
                    <el-button class="table-search-button-item right-border" color="#dcdfe6" plain v-blur>
                        <Icon size="14" name="fa fa-download" />
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="csv">导出为CSV</el-dropdown-item>
                            <el-dropdown-item command="excel">导出为Excel</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <!-- 拖拽排序按钮 -->
                <el-dropdown trigger="click">
                    <el-button class="table-search-button-item right-border" color="#dcdfe6" plain v-blur>
                        <Icon size="14" name="fa fa-arrows" />
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>                            <el-dropdown-item @click="onChangeToggleDrag('row')">
                                <el-checkbox :model-value="draggable?.row">行拖拽排序</el-checkbox>
                            </el-dropdown-item>
                            <el-dropdown-item @click="onChangeToggleDrag('column')">
                                <el-checkbox :model-value="draggable?.column">列拖拽排序</el-checkbox>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <span style="color: var(--el-text-color-secondary); font-size: 12px;">
                                    提示: 启用拖拽后可直接拖动表格行或列来排序
                                </span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- 通用搜索按钮 -->
                <el-tooltip content="查询" placement="top">
                    <el-button class="table-search-button-item" @click="$emit('toggle-search')" color="#dcdfe6" plain v-blur>
                        <Icon size="14" name="el-icon-Search" />
                    </el-button>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
    column: {
        type: Array,
        required: true
    },
    tableButtons: {
        type: Array,
        default: () => []
    },
    showComSearch: {
        type: Boolean,
        default: false
    },
    draggable: {
        type: Object,
        default: () => ({ row: false, column: false })
    }
})

const emit = defineEmits(['change-show-column', 'export-table', 'toggle-drag', 'toggle-search'])

// 获取可显示的列
const columnDisplay = computed(() => {
    let columnDisplayArr = []
    for (let item of props.column) {
        item.enableColumnDisplayControl === false ? '' :  columnDisplayArr.push(item)
    }
    return columnDisplayArr
})

// 列显示控制
const onChangeShowColumn = (value: string | number | boolean, field: string) => {
    emit('change-show-column', { field, value })
}

// 表格导出
const onChangeExportTable = (type: 'csv' | 'excel') => {
    emit('export-table', type)
}

// 拖拽排序
const onChangeToggleDrag = (type: 'row' | 'column') => {
    // 反转当前状态
    const newState = type === 'row' 
        ? { row: !props.draggable?.row, column: props.draggable?.column }
        : { row: props.draggable?.row, column: !props.draggable?.column }
    
    console.log('切换拖拽状态:', type, newState)
    emit('toggle-drag', type)
}
</script>

<style scoped lang="scss">
.table-header {
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 20px 24px;
    font-size: 14px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    
    .table-header-operate-text {
        margin-left: 8px;
    }
    
    .el-button {
        padding: 10px 18px;
        transition: all 0.3s ease;
        font-weight: 500;
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
    }
}

.mlr-12 {
    margin-left: 12px;
}
.mlr-12 + .el-button {
    margin-left: 12px;
}
.table-search {
    display: flex;
    margin-left: auto;
    .quick-search {
        width: auto;
    }
}
.table-search-button-group {
    display: flex;
    margin-left: 16px;
    border: 1px solid var(--el-border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    
    button:focus,
    button:active {
        background-color: var(--ba-bg-color-overlay);
    }
    button:hover {
        background-color: var(--el-color-info-light-9);
    }
    .table-search-button-item {
        height: 36px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 0;
        transition: all 0.3s ease;
    }
    .el-button + .el-button {
        margin: 0;
    }
    .right-border {
        border-right: 1px solid var(--el-border-color);
    }
}

html.dark {
    .table-search-button-group {
        button:focus,
        button:active {
            background-color: var(--el-color-info-dark-2);
        }
        button:hover {
            background-color: var(--el-color-info-light-7);
        }
        button {
            background-color: var(--ba-bg-color-overlay);
            el-icon {
                color: white !important;
            }
        }
    }
}

.table-com-search {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 20px 24px;
    font-size: 14px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

@media (max-width: 768px) {
    .table-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        
        .table-search {
            margin-left: 0;
            margin-top: 12px;
            width: 100%;
            
            .quick-search {
                width: 100%;
                flex: 1;
                margin-right: 12px;
            }
        }
    }
}
</style>
